<!doctype html>
<script src="../../resources/ahem.js"></script>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../assert_selection.js"></script>
<script>
// To test this manually, press mouse button below the 'F' and drag the mouse to
// the comma between "ABC" and "DEF".
const kBlueBox = [
    'padding-left: 200px;',
    'padding-bottom: 200px;',
    'background-color: blue;',
    'height: 200px;',
].join(' ');

for (const platform of ['android', 'mac', 'unix', 'win']) {
    selection_test(
        [
            '<div style="width: 200px;">',
                '<b>ABC,</b><i id="target">DEF</i><br>',
                `<b style="${kBlueBox}"></b>`,
            '</div>',
        ],
        selection => {
            if (!window.eventSender)
                throw 'This test requires eventSender.';

            if (!window.internals)
                throw 'This test requires internals.';
            internals.settings.setEditingBehavior(platform);

            const target = selection.document.getElementById("target");
            const endX = selection.computeLeft(target);
            const startX = endX + target.offsetWidth;
            const endY = selection.computeTop(target);
            const startY = endY + 50;

            eventSender.leapForward(9999); // reset mouse button
            eventSender.mouseMoveTo(startX, startY);
            eventSender.mouseDown();
            eventSender.mouseMoveTo(endX, endY);
            eventSender.mouseUp();
        },
        [
            '<div style="width: 200px;">',
                '<b>ABC,</b><i id="target">|DEF^</i><br>',
                `<b style="${kBlueBox}"></b>`,
            '</div>',
        ], `${platform}`);
}
</script>
